import React, {useCallback, useState} from 'react'
import { useMemo } from 'react'
import Input from './Input'
import List from './List'

const data = [
    {
        title: 111, 
        time: new Date().toLocaleString()
    }
]
// useMemo, 返回一个值，参数也是一个函数和依赖项的数组
// useCallback, 返回一个函数，缓存这个函数
// memo 用来做性能优化

const TodoList = () => {
    console.log('todolist render')
    const [list, setList] = useState(data);
    const [count, setCount] = useState(0);
    const handleList = useCallback((text) => {
        setList((list) => [
            { title: text, time: new Date().toLocaleString() },
             ...list
            ])
    },[])

    const len = useMemo(()=>{
        return list.filter(item => {
            console.log('fileter');
            return item.title.length > 3
        }).length
    },[list])
    const add = () => {
        setCount(count + 5);
    }
    return (
        <div>
            <button onClick={add}>点击+1</button>
            <h1>TodoList-{count}</h1>
            <h2>title长度大于3的条数：{len}</h2>
            <Input handleList={handleList} setList={setList} />
            <List data={list} />
        </div>
    )
}

export default TodoList